<template>
  <van-cell class="user-info">
    <template #icon>
      <van-image :src="articles.aut_photo" round fit="cover" class="avatar" />
    </template>
    <template #title>
      <div class="user-name">{{ articles.aut_name }}</div>
      <div class="publish-data">{{ articles.pubdate }}</div>
    </template>
    <van-button
      v-if="isShowFollow"
      class="follow-btn"
      round
      size="small"
      type="info"
      @click="unFollow"
      >已关注</van-button
    >
    <van-button
      v-else
      round
      size="small"
      type="info"
      icon="plus"
      @click="follow"
      >关注</van-button
    >
  </van-cell>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { followUserAPI, unFollowUserAPI } from '@/api'
export default {
  name: '',
  components: {},
  props: {
    articles: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isShow: 1
    }
  },
  computed: {
    ...mapState(['myId']),
    ...mapGetters(['isLogin']),
    isShowFollow() {
      if (this.isShow === 1) {
        return this.articles.is_followed
      } else {
        return this.isShow
      }
    }
  },
  watch: {},
  created() {},
  methods: {
    // 关注
    async follow() {
      if (!this.isLogin) {
        return this.$toast.fail('操作失败，请先登录')
      }
      if (this.myId === this.articles.aut_id) {
        return this.$toast.fail('操作失败，自己不能关注自己')
      }
      try {
        await followUserAPI(this.articles.aut_id)
        this.isShow = true
      } catch (error) {
        this.$toast.fail('关注失败，请重试！')
      }
    },
    // 取消关注
    async unFollow() {
      await unFollowUserAPI(this.articles.aut_id)
      this.isShow = false
    }
  }
}
</script>

<style scoped lang="less">
.user-info {
  align-items: center;
  padding: 0 0.42667rem;
  .avatar {
    width: 0.93333rem;
    height: 0.93333rem;
    margin-right: 0.22667rem;
  }
  .user-name {
    font-size: 0.32rem;
    color: #3a3a3a;
  }
  .publish-data {
    line-height: 0.48rem;
    font-size: 0.30667rem;
    color: #b7b7b7;
  }
  .van-button {
    width: 2.26667rem;
    height: 0.77333rem;
    color: white;
    background: rgb(50, 150, 250);
    border-color: rgb(50, 150, 250);
    .van-button__text {
      margin-left: 0.10667rem;
    }
  }
  .follow-btn {
    color: #323233;
    background-color: #fff;
    border: 0.02667rem solid #ebedf0;
  }
  &::after {
    border-bottom: unset;
  }
}
</style>
